import React from 'react';
import { AnimatedCircularProgress } from 'react-native-circular-progress';
import { connect } from 'react-redux';

const mapStateToProps = ({ player }) => {
    return {
        currentTime: player.currentTime,
        duration: player.duration,
    };
};

const connector = connect(mapStateToProps);



function Progress(props) {
    const { children, currentTime, duration } = props;
    const fill = duration ? (currentTime / duration) * 100 : 0;
    return (
        <AnimatedCircularProgress
            size={40}
            width={2}
            tintColor="#f86442"
            backgroundColor="#ededed"
            fill={fill}>
            {() => <>{children}</>}
        </AnimatedCircularProgress>
    );
}

export default connector(Progress);
